<template>
  <div class="key-box">
    <div class="key" v-for="(i, m) in list" :key="m">
      <span class="key-item">{{ i }}</span>
      <span class="add" v-if="m !== list.length - 1" >+</span>
    </div>
    <span class="key-tip">{{ tip }}</span>
  </div>
</template>
<script>
  export default {
    name: 'ShortcutKeyItem',
    props: {
      list: {
        type: Array
      },
      tip: {
        type: String
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .key-box
    display flex
    align-items center
    margin-top 10px
    .key
      display flex
      justify-content space-between
      margin-right 20px
      .key-item
       display inline-block
       line-height 32px
       text-align center
       width 50px
       height 32px
       background #FAFAFA
       border 1px solid #ECF0F3
       border-radius 4px
      .key-tip
        font-weight 400
        color #595959
      .add
       margin-left 20px
       display flex
       align-items center
</style>
